import { Table, Popconfirm, message } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';



export default ({ rows = [], deleteId = () => { console.log("删除") }, states } = () => { console.log("更新") }) => {

  // console.log(rows);
 async function confirm(e) {
    await deleteId(e)
    message.success('删除成功');
  }

  function cancel(e) {
    message.error('取消删除');
  }
  const expandedRowRender = (record) => {
    const columns = [
      { title: '商品编号', dataIndex: 'childId', key: 'childId' },
      { title: '商品名', dataIndex: 'name', key: 'name' },
      { title: '商品价格', dataIndex: 'price', key: 'price' },
      { title: '商品数量', dataIndex: 'quantity', key: 'quantity' },
      { title: '剩余库存', dataIndex: 'count', key: 'count' },
    ];

    const data = [];
    for (let i = 0; i < record.child.length; i++) {
      data.push({
        key: i,
        childId: `${record.child[i].commId.childId}`,
        name: `${record.child[i].commId.name}`,
        price: `${record.child[i].commId.price}`,
        quantity: `${record.child[i].quantity}`,
        count: `${record.child[i].commId.count}`,
      });

    }
    return <Table columns={columns} dataSource={data} pagination={false} />
  };

  const columns = [
    { title: '订单编号', dataIndex: 'id', key: 'id' },
    { title: '用户名', dataIndex: 'name', key: 'name' },
    { title: '购买时间', dataIndex: 'time', key: 'time' },
    { title: '总价', dataIndex: 'total', key: 'total' },
    { title: '订单状态', dataIndex: 'state', key: 'state' },
    {
      title: '操作', key: 'operation', render: ({ id, state }) => {
        if (state === "已完成") {
          return <button disabled onClick={() => { states(id) }} style={{ backgroundColor: "#808080" ,color:"white",border:"none"}}>完成</button>
        }
        return <button onClick={() => { states(id) }} style={{border:"none",color:"white",backgroundColor:"#FF6347 "}}>完成</button>
      }
    },
    {
      title: '取消订单', key: 'operation', render: ({ id }) => {
        return <Popconfirm title="确认删除？" okText="是" cancelText="否" onConfirm={()=>confirm(id)}
          onCancel={cancel}>
          <DeleteOutlined style={{ fontSize: "20px", marginLeft: "15px" }} />
        </Popconfirm>
      }
    },
  ];

  // const expandedRowRender = (record) => {
  //   const columns = [
  //         { title: '商品编号', dataIndex: 'childId', key: 'childId' },
  //         { title: '商品名', dataIndex: 'name', key: 'name' },
  //         { title: '商品价格', dataIndex: 'price', key: 'price' },
  //         { title: '商品数量', dataIndex: 'quantity', key: 'quantity' },
  //         { title: '剩余库存', dataIndex: 'count', key: 'count' },
  //       ];
  //       console.log(record);
  //   return <Table columns={columns} dataSource={record.childTable} pagination={false} />;
  // };

  const data = [];
  for (let i = 0; i < rows.length; ++i) {
    data.push({
      key: i,
      id: `${rows[i]._id}`,
      name: `${rows[i].userId.username}`,
      time: `${rows[i].time}`,
      total: `${rows[i].total}`,
      state: `${rows[i].state}`,
      child: rows[i].information
    });
  }

  return (
    <Table
      className="components-table-demo-nested"
      columns={columns}
      expandable={{ expandedRowRender }}
      dataSource={data}
    />
  );
}